import { ExclamationCircleFilled } from '@ant-design/icons';
import { Layout, Menu, Modal } from 'antd';
import React from 'react';
const { confirm } = Modal;
const { Header } = Layout;
import { useNavigate } from 'react-router-dom';
const items1 = [
    {
        key: "user-center",
        label: "个人中心"
    },
    {
        key: "logout",
        label: "退出登录"
    }
]

export default function Myheader() {

    const user = JSON.parse(localStorage.userInfo)
    const useNav = useNavigate()
    function clickMenu(parpms) {
        console.log(parpms);
        switch (parpms.key) {
            case 'logout':
                confirm({
                    title: '是否退出登录',
                    icon: <ExclamationCircleFilled />,
                    okText: "确定",
                    cancelText: "取消",
                    onOk() {
                        localStorage.clear()
                        useNav('/login', { replace: true })
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                });
                break;
            case 'user-center':
                break
        }
    }
    return (
        <Header className="header" style={{ display: 'flex', justifyContent: "space-between" }}>
            <div style={{ color: '#fff', display: 'flex', alignItems: "center" }}><span style={{ marginRight: 15, fontSize: 30, fontStyle: "italic" }}>蜗牛学苑</span><span>欢迎您：{user.account}</span>
                <img style={{ width: 50, height: 50, borderRadius: 50, marginLeft: 10 }}
                    src={`http://jacklv.cn/images/${user.imgUrl}`} />
            </div>
            <Menu onClick={clickMenu} theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
        </Header>
    )
}
